<template>
  <router-view v-if="!$route.meta.showFatherRouter"></router-view>
  <div v-else class="container">
    <div class="sheet-box" @click="showMonthPick('ProfitSheet')">利润表</div>
    <div class="sheet-box" @click="showMonthPick('DebtSheet')">资产负债表</div>
    <div class="sheet-box" @click="showMonthPick('BalanceSheet')">余额表</div>
    <div class="sheet-box" @click="showMonthPick('DetailSheet')">明细账</div>
    <div class="sheet-box" @click="showMonthPick('AccountantSheet')">
      会计分录
    </div>
    <div class="sheet-box" @click="showMonthPick('SalarySheet')">工资表</div>
    <el-dialog v-model="dialogFormVisible" title="请选择" width="25%">
      <!-- <monthpick></monthpick> -->
      <div class="block">
        <span>月份：</span>
        <el-date-picker
          v-model="value5"
          type="month"
          placeholder="选择月份"
          value-format="YYYY-MM"
        />
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="toSheet()"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const dialogFormVisible = ref(false);
const value5 = ref();
const PATH = ref("");
const showMonthPick = (path) => {
  dialogFormVisible.value = true;
  PATH.value = path;
};
const toSheet = () => {
  dialogFormVisible.value = false;
  router.push({
    name: PATH.value,
    state: { month: value5.value },
  });
};
</script>
<style lang="less" scoped>
.container {
  height: calc(100vh - 142px);
  background: @mainColor;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: center;

  .sheet-box {
    margin: 1vw;
    padding: 1vw;
    width: 17vw;
    height: 15vh;
    line-height: 15vh;
    font-size: 20px;
    text-align: center;
    background: linear-gradient(#f2f9fe, #e6f4fe);
    border-radius: 1vh;
  }
}
</style>
